<template>
  <div class="activity-box">
    <div class="activity-list">
      <div class="activity-item" v-for="(item,index) in 3" :key="index">
        <div class="img-box">
          <img src="@icon/钻石.jpg" alt="">
        </div>
        <div class="text-box">
          <p>新课三重礼</p>
          <p class="text-gray">活动时间：2020年10月1日 - 10月30日</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "activity",
  data(){
    return {

    }
  }
}
</script>

<style lang="stylus" scoped>
.activity-box
  display flex
  width 100%
  flex-direction column
  background #F7F7F7
  min-height 100vh
  padding-bottom 88px
  color #333
  .activity-item
    display flex
    flex-direction column
    margin 30px 30px 0
    min-height 337px
    border-radius 20px
    overflow hidden
    .img-box
      height 200px
      img
        width 100%
        height 100%
    .text-box
      background #fff
      padding 30px
      .text-gray
        font-size 26px
        margin-top 16px
</style>
